<template>
    <div v-show="false">wsnm</div>
</template>
<script lang="ts">
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import {FirstPersonControls} from 'three/examples/jsm/controls/FirstPersonControls.js';
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import IESSpotLight from 'three/examples/jsm/lights/IESSpotLight.js'

const ww = window.innerWidth;
const wh = window.innerHeight

const param = {
    pasture: {
        w: 10000,
        h:10000
    },
    camera: {
        v: 50,
        aspect: ww / wh,
        np: 30,
        fp: 5000,
        x: 0,
        y: 100,
        z: 500
    },
    horizontal: 0.36 * Math.PI,
    // horizontal: 0,
    soar: 10,
    wallRotation: {
        l:.5*Math.PI
    }
}

// 建立草原
const scene = new THREE.Scene()
// scene.fog = new THREE.Fog(0xffffff, 300, 6000)
scene.fog = new THREE.Fog(0x0000, 300, 6000)
const pastureGeo = new THREE.PlaneGeometry(param.pasture.w, param.pasture.h)
const pastureTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/grass.jpg')
pastureTexture.wrapS = THREE.RepeatWrapping;
pastureTexture.wrapT = THREE.RepeatWrapping;
pastureTexture.repeat.set(50, 50)
const pastureMtl = new THREE.MeshBasicMaterial({map:pastureTexture})
const pastureMesh = new THREE.Mesh(pastureGeo, pastureMtl)


// 房子
const house = new THREE.Group()


// 地基 && 基础
const foundation = new THREE.BoxGeometry(300, 200,1)
const foundationTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/foundation.jpg')
foundationTexture.wrapS = THREE.RepeatWrapping;
foundationTexture.wrapT = THREE.RepeatWrapping;
foundationTexture.repeat.set(2, 1)
const foundationMtl = new THREE.MeshBasicMaterial({map: foundationTexture})
const foundationMesh = new THREE.Mesh(foundation, foundationMtl)
house.add(foundationMesh)

// 床
new FBXLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/bed.fbx', onLoadFBX)
function onLoadFBX(obj:any){
    obj.rotation.x = 0.01*Math.PI
    obj.rotation.z = -.5*Math.PI
    obj.position.z = 20
    obj.position.y = -50
    obj.position.x = 102
    const bedMtl1 = new THREE.MeshBasicMaterial({color: 'rgb(168,152,184)'})
    const bedMtl2 = new THREE.MeshBasicMaterial({color: 'rgb(188,171,184)'})
    const bedMtl3 = new THREE.MeshBasicMaterial({color: 'rgb(56,58,54)'})
    const bedMtl4 = new THREE.MeshBasicMaterial({color: 'rgb(213,212,204)'})
    const bedMtl5 = new THREE.MeshBasicMaterial({color: 'rgb(228,221,164)'})
    const bedMtl6 = new THREE.MeshBasicMaterial({color: 'rgb(90,56,54)'})
    const bedMtlArr = [bedMtl1,bedMtl2,bedMtl3,bedMtl4,bedMtl5,bedMtl6]
    obj.children[0].children.forEach((item:any, index:any) => {
        obj.children[0].children[index].material = bedMtlArr[index]
    })
    house.add(obj)
}

// 点击位置
const campass = new THREE.PlaneGeometry(50, 50)
const campassTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/campass.jpg')
const campassMtl = new THREE.MeshBasicMaterial({map:campassTexture})
const campassMesh = new THREE.Mesh(campass, campassMtl)
campassMesh.position.z = 1
campassMesh.position.x = -100
campassMesh.name = 123
// house.add(campassMesh)

const campassMeshR = new THREE.Mesh(campass, campassMtl)
campassMeshR.position.z = 1
campassMeshR.position.x = 100
campassMeshR.name = 123
// house.add(campassMeshR)

const campassMeshF = new THREE.Mesh(campass, campassMtl)
campassMeshF.position.z = 1
campassMeshF.position.y = -200
campassMeshF.name = 456
// house.add(campassMeshF)

const campassMeshB = new THREE.Mesh(campass, campassMtl)
campassMeshB.position.z = 1
campassMeshB.position.y = 200
campassMeshB.name = 456
// house.add(campassMeshB)

// 左右墙壁
const sideWallShape = new THREE.Shape()
sideWallShape.moveTo(-100,0)
sideWallShape.lineTo(100,0)
sideWallShape.lineTo(100,100)
sideWallShape.lineTo(0,150)
sideWallShape.lineTo(-100,100)
sideWallShape.lineTo(-100,0)
const sideWallGeo = new THREE.ExtrudeGeometry(sideWallShape)
const sideWallTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/wall.jpg')
sideWallTexture.wrapS = THREE.RepeatWrapping
sideWallTexture.wrapT = THREE.RepeatWrapping
sideWallTexture.repeat.set(0.01, 0.005)
const sideWallMtl = new THREE.MeshBasicMaterial({map:sideWallTexture})
const sideWllMeshL = new THREE.Mesh(sideWallGeo, sideWallMtl)
sideWllMeshL.rotation.x = 0.5*Math.PI;
sideWllMeshL.rotation.y = 0.5*Math.PI;
sideWllMeshL.position.x = -150

const sideWllMeshR = new THREE.Mesh(sideWallGeo, sideWallMtl)
sideWllMeshR.rotation.x = 0.5*Math.PI;
sideWllMeshR.rotation.y = 0.5*Math.PI;
sideWllMeshR.position.x = 150



// 前后墙壁
const backWallShape = new THREE.Shape()
backWallShape.moveTo(-150,0)
backWallShape.lineTo(150,0)
backWallShape.lineTo(150,100)
backWallShape.lineTo(-150,100)
backWallShape.lineTo(-150,0)

const backWallGeo = new THREE.ExtrudeGeometry(backWallShape)
const backWallMtl = new THREE.MeshBasicMaterial({map:sideWallTexture})
const backWallMesh = new THREE.Mesh(backWallGeo, backWallMtl)
backWallMesh.rotation.x = 0.5*Math.PI;
backWallMesh.position.y = 100

const frontWallShape = new THREE.Shape()
frontWallShape.moveTo(-150,0)
frontWallShape.lineTo(150,0)
frontWallShape.lineTo(150,100)
frontWallShape.lineTo(-150,100)
frontWallShape.lineTo(-150,0)

const windowShape = new THREE.Path()
windowShape.moveTo(-20, 20)
windowShape.lineTo(120,20)
windowShape.lineTo(120,80)
windowShape.lineTo(-20,80)
windowShape.lineTo(-20,20)
frontWallShape.holes.push(windowShape)

const doorShape = new THREE.Path()
doorShape.moveTo(-120, 2)
doorShape.lineTo(-50,2)
doorShape.lineTo(-50,80)
doorShape.lineTo(-120,80)
doorShape.lineTo(-120,2)
frontWallShape.holes.push(doorShape)

const frontWallGeo = new THREE.ExtrudeGeometry(frontWallShape)
const frontWallMtl = new THREE.MeshBasicMaterial({map:sideWallTexture})
const frontWallMesh = new THREE.Mesh(frontWallGeo, frontWallMtl)
frontWallMesh.rotation.x = 0.5*Math.PI;
frontWallMesh.position.y = -100



// 屋顶
const roofGeo = new THREE.BoxGeometry(320, 122, 2)
const roofTexture = new THREE.TextureLoader().load('http://public.minio.zcloudtechs.cn:9000/web-static/canteen-app/home/tile.jpg')
roofTexture.wrapS = THREE.RepeatWrapping
roofTexture.wrapT = THREE.RepeatWrapping
roofTexture.repeat.set(5, 5)
const roofMtl = new THREE.MeshBasicMaterial({map:roofTexture})
const roofMeshB = new THREE.Mesh(roofGeo, roofMtl)
roofMeshB.position.z = 122.5
roofMeshB.position.y = 54
roofMeshB.rotation.x = -0.1476*Math.PI

const roofMeshF = new THREE.Mesh(roofGeo, roofMtl)
roofMeshF.position.z = 122.5
roofMeshF.position.y = -54
roofMeshF.rotation.x = 0.1476*Math.PI



// 吊顶
const ceilingGeo = new THREE.BoxGeometry(300, 200, 1)
const ceilingMtl = new THREE.MeshBasicMaterial({color:'#f7f7f7'})
const ceilMesh = new THREE.Mesh(ceilingGeo, ceilingMtl)
ceilMesh.position.z = 100

// 摄像头
const camera = new THREE.PerspectiveCamera(param.camera.v,param.camera.aspect, param.camera.np, param.camera.fp)
camera.position.set(param.camera.x,param.camera.y, param.camera.z)
scene.add(camera)

// 渲染
scene.add(pastureMesh)
pastureMesh.rotation.x = -0.46*Math.PI
house.rotation.x = -0.46*Math.PI
house.add(ceilMesh)
house.add(roofMeshB)
house.add(roofMeshF)
house.add(frontWallMesh)
house.add(backWallMesh)
house.add(sideWllMeshL)
house.add(sideWllMeshR)
scene.add(house)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(ww, wh)
// renderer.setClearColor(0xcce0ff)
renderer.setAnimationLoop(animation)
document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

// const controls = new FirstPersonControls(camera, renderer.domElement)
// controls.movementSpeed = 150;
// controls.lookSpeed = 0.1;
// const clock = new THREE.Clock();

// const controls = new PointerLockControls(camera, document.body)



const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const mouseDown = (e:any) => {
    e.preventDefault();
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        const signArr = intersects.filter((item:any) => {
            return String(item.object.name)
        })
        if (!signArr.length) return
        const { x, y, z} = signArr[0].object.position
        console.log(signArr[0], camera)
        camera.position.x = x
        camera.position.y = y
        camera.position.z = z
    }
};


function animation() {
    // controls.update(.005);
    renderer.render(scene, camera)
}

window.addEventListener('pointerdown', mouseDown)
</script>
<style lang="less" scoped>
.a{
    background-color: rgb(21,31,81);
}
</style>
